<template>
	<div class="page">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" title="充值" left-arrow @click-left="onClickLeft">
		</van-nav-bar>
		<div class="sin-wrap">
			<div class="methods">
				<div class="typeScrollList">
					<div class="scroll-wrapper">
						<div class="scroll-content">
							<div @click="mactive = 0" class="scroll-item methodsItem" :class="mactive == 0?'active':''">Chuyển khoản qua thẻ ngân hàng</div>
							<div @click="mactive = 1" class="scroll-item methodsItem" :class="mactive == 1?'active':''">Nạp tiền qua quét mã QR</div>
						</div>
					</div>
				</div>
			</div>
			<div class="cardList">
				<p class="title"> Chọn kênh thanh toán </p>
				<div class="typeScrollList" v-show="mactive == 0">
					<div class="scroll-wrapper">
						<div class="scroll-content">
							<div class="scroll-item scroll-item-tags active"> Chuyển khoản qua thẻ ngân hàng </div>
						</div>
					</div>
				</div>
				<div v-show="mactive == 1">
					<div class="typeScrollList">
						<div class="scroll-wrapper">
							<div class="scroll-content">
								<div class="scroll-item scroll-item-tags" @click="onTabA(index)" v-for="(item,index) in tabsA" :key="item" :class="curA == index?'active':''" >{{item}}</div>
							</div>
						</div>
					</div>
					<div class="transferInMoneyList" >
						<p class="transferInText">Chọn nhanh tiền nạp</p>
						<div class="moneyGrid">
							<div class="van-grid" >
								<div class="van-grid-item" @click="onTabquic(item.value)" v-for="(item,index) in tabsquic" :key="index" :class="quickcur == index?'active':''" style="flex-basis: 20%;">
									<div class="moneyList">{{item.label}}</div>
								</div>
							</div>
						</div>
					</div>
					<div >
						<van-field v-model="revalue" placeholder="20,000-99,999,999" />
					</div>
				</div>
				<div class="promptItem">
					<p>Chọn lời nhắc thanh toán：&nbsp;</p>
					<p>1. Nạp tiền tối thiểu là 50,000.00 VND,<br>Tối đa là 99,999,999.00 VND.</p>
					<p>2. Tài khoản nhận sẽ thay đổi mà không báo trước, vui lòng kiểm tra số tài khoản chính xác trước
						mỗi lần nạp.&nbsp;</p>
					<p>3. Vui lòng nhập chính xác mã chuyển tiền khi nạp.</p>
				</div>
				<div class="send">
					<div v-if="mactive == 0" class="sendBtn" @click="url('/bankPay')"> Nạp ngay </div>
					<div v-if="mactive == 1" class="sendBtn"> Nạp ngay </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				mactive:0,
				curA: 0,
				revalue:'',
				tabsA: ['dy-momo', 'MoMo(c)','Viettel Pay(c)', 'Zalo(c)'],
				quickcur: 0,
				tabsquic: [
					{
						label:'+1K',
						value:'1000'
					},{
						label:'+5K',
						value:'5000'
					},{
						label:'+10K',
						value:'10000'
					},{
						label:'+50K',
						value:'50000'
					},{
						label:'+100K',
						value:'100000'
					},{
						label:'+500K',
						value:'1000'
					},{
						label:'+1M',
						value:'1000'
					},{
						label:'+5M',
						value:'1000'
					},{
						label:'+10M',
						value:'1000'
					},{
						label:'+50M',
						value:'1000'
					}
				],
			}
		},
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
			onTabA(e) {
				this.curA = e
			},
			onClickLeft() {
				this.$router.go(-1)
			},
			onTabquic(e){
				this.revalue = e
			},
		}
	}
</script>
<style>
</style>
